<template>
    <div class="sub-info">
        <div class="sub-info-title">
            <span>求职意向</span>
            <el-button
                    :disabled="id == -1 || !id"
                    type="primary"
                    @click="handleClick(edit)">
                {{edit ? '保存' : '编辑'}}
            </el-button>
        </div>
        <el-form
                :rules="rules"
                label-position="left"
                ref="form"
                :model="form"
                label-width="80px"
                class="resume-form">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="目前状态" prop="currentStatus">
                        <el-select
                                clearable
                                :disabled="!edit"
                                v-model="form.currentStatus"
                                placeholder="请选择目前状态">
                            <el-option
                                    v-for="(v,i) in selectItems.currentStatusList"
                                    :label="v.name"
                                    :value="v.val"
                                    :key="i"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="期望职位" prop="hopeJobAll">
                        <el-cascader
                                clearable
                                @change="function(val){changeCascader(val,2)}"
                                :props="props"
                                popper-class="level3"
                                v-model="form.hopeJobAll"
                                :options="selectItems.jobCategoryList"
                                :disabled="!edit"
                                placeholder="请选择期望职位">
                        </el-cascader>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="期望行业" prop="hopeTradeAll">
                        <el-cascader
                                clearable
                                @change="function(val){changeCascader(val,1)}"
                                :props="props"
                                popper-class="level2"
                                v-model="form.hopeTradeAll"
                                :options="selectItems.tradeCategoryList"
                                :disabled="!edit"
                                placeholder="请选择期望行业">
                        </el-cascader>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作地点" prop="workPlace">
                        <el-select
                                multiple
                                :multiple-limit="3"
                                v-model="form.workPlace"
                                placeholder="请选择工作地点"
                                :disabled="!edit"
                                clearable>
                            <el-option
                                    v-for="(v,i) in selectItems.workPlaceList"
                                    :label="v.name"
                                    :value="v.val"
                                    :key="i"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="工作方式" prop="workMode">
                        <el-select v-model="form.workMode" placeholder="请选择工作方式" :disabled="!edit" clearable>
                            <el-option
                                    v-for="(v,i) in selectItems.workModeList"
                                    :label="v.name"
                                    :value="v.val"
                                    :key="i"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="期望薪资" prop="hopeWage">
                        <el-input placeholder="请输入期望薪资" v-model.number="form.hopeWage" :disabled="!edit" clearable>
                            <template slot="append">元 / 月</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="是否需要技能培训" prop="needTrain">
                        <el-select v-model="form.needTrain" placeholder="请选择是否需要技能培训" :disabled="!edit" clearable>
                            <el-option label="是" :value="true"></el-option>
                            <el-option label="否" :value="false"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12"></el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
    export default {
        props:['selectItems','id','basicForm'],
        data() {
            let salaryPass = (rule,value,callback) => {
                let reg = /^[0-9]*$/;
                if(value < 0){
                    callback(new Error("不能为负数"));
                } else if (value  && !reg.test(value)) {
                    callback(new Error("请输入整数"));
                } else if(!value){
                    callback();
                }else if(String(value).length > 5000000 ){
                    callback(new Error("不能多于5000000字"));
                }else {
                    callback();
                }
            }
            return {
                props: {
                    value: "code",
                    label: "name",
                    children: "childVo",
                    multiple: true
                },
                edit: false,
                options:[],
                form: {
                    currentStatus: '',
                    hopeJobAll: [],
                    hopeTradeAll: [],
                    hopeJob: [],
                    hopeTrade: [],
                    workPlace: [],
                    workMode: '',
                    hopeWage: '',
                    needTrain: ''
                },
                rules: {
                    currentStatus: [
                        { required: true, message: '请选择目前状态', trigger: 'change' }
                    ],
                    hopeJobAll: [
                        { required: true, message: '请选择期望职位', trigger: 'change' }
                    ],
                    hopeTradeAll: [
                        { required: true, message: '请选择期望行业 ', trigger: 'change' }
                    ],
                    workPlace: [
                        { required: true, message: '请选择工作地点', trigger: 'change' }
                    ],
                    workMode: [
                        { required: true, message: '请选择工作方式', trigger: 'change' }
                    ],
                    hopeWage: [
                        { required: true, message: '请输入期望薪资', trigger: 'blur' },
                        { validator: salaryPass, trigger: 'blur' }
                    ]
                }
            };
        },
        methods: {
            handleClick(edit) {
                if(edit) {
                    this.$refs['form'].validate((valid) => {
                        if (valid) {
                            let temp = JSON.parse(JSON.stringify(this.form));
                            this.id ? temp.id = this.id : '';
                            temp.workPlace = JSON.stringify(this.form.workPlace);
                            temp.hopeJob = JSON.stringify(this.form.hopeJob);
                            temp.hopeTrade = JSON.stringify(this.form.hopeTrade);
                            this.$emit('updateResume',temp,6,this.index)
                            this.edit = !this.edit;
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                } else {
                    this.edit = !this.edit;
                }

            },
            initData(type) {
                if(type == 1) {
                    this.form.hopeTrade.forEach(item => {
                        this.selectItems.tradeCategoryList.forEach( i => {
                            if(i.childVo) {
                                i.childVo.forEach( a => {
                                    if(a.code == item) {
                                        let arr = [];
                                        arr.push(i.code);
                                        arr.push(item);
                                        this.form.hopeTradeAll.push(arr)

                                    }
                                    if(a.childVo) {
                                        a.childVo.forEach( b => {
                                            if(b.code == item) {
                                                let arr = [];
                                                arr.push(i.code);
                                                arr.push(a.code);
                                                arr.push(item);
                                                this.form.hopeTradeAll.push(arr)
                                            }
                                        })
                                    }
                                })
                            }
                        })
                    })
                } else {
                    this.form.hopeJob.forEach(item => {
                        this.selectItems.jobCategoryList.forEach( i => {
                            if(i.childVo) {
                                i.childVo.forEach( a => {
                                    if(a.code == item) {
                                        let arr = [];
                                        arr.push(i.code);
                                        arr.push(item);
                                        this.form.hopeJobAll.push(arr)

                                    }
                                    if(a.childVo) {
                                        a.childVo.forEach( b => {
                                            if(b.code == item) {
                                                let arr = [];
                                                arr.push(i.code);
                                                arr.push(a.code);
                                                arr.push(item);
                                                this.form.hopeJobAll.push(arr)
                                            }
                                        })
                                    }
                                })
                            }
                        })
                    })
                }
            },
            changeCascader(val,type) {
                if(type == 1) {
                    if(val.length > 3) {
                        this.form.hopeTradeAll = val.slice(0,-1)
                        this.$message('最多三项');
                    }
                    this.form.hopeTrade = this.form.hopeTradeAll.map( i => {
                        return i[i.length - 1]
                    })
                    console.log(this.form.hopeTradeAll)
                    console.log(this.form.hopeTrade)
                } else {
                    if(val.length > 3) {
                        this.form.hopeJobAll = this.form.hopeJobAll.slice(0,-1)
                        this.$message('最多三项');
                    }

                    this.form.hopeJob = this.form.hopeJobAll.map( i => {
                        return i[i.length - 1]
                    })
                }
            }
        },
        created() {
            if(this.basicForm) {
                for(let a in this.form) {
                    for( let b in this.basicForm) {
                        if(a == b && this.basicForm[b] ) {
                            if(/hopeTrade|hopeJob|workPlace/.test(a)) {
                                this.form[a] =  JSON.parse(this.basicForm[b]);
                                if(a == 'hopeTrade') {
                                    this.initData(1)
                                } else if(a == 'hopeJob') {
                                    this.initData(2)
                                }

                            } else {
                                this.form[a] =  this.basicForm[b];
                            }
                        } else {
                            if(this.basicForm.needTrain == false && a == 'needTrain') {
                                this.form[a] =  false;
                            }
                        }
                    }
                }
            }
        }
    };
</script>
<style lang="css" scoped>
    .sub-info {
        background: #ffffff;
    }
    .sub-info-title {
        display: flex;
        justify-content: space-between;
        padding: 0 44px;
        background: #ffffff;
        height: 62px;
        align-items: center;
    }
    .sub-info-title span:after {
        width: 28px;
        height: 2px;
        background: #1893FC;
        content: "";
        display: block;
        margin-top: 3px;
    }
    .sub-info-title .el-button {
        padding: 0;
        width:94px;
        height:24px;
        line-height: 24px;
        box-sizing: border-box;
        background: #1893FC;
    }
    .resume-form {
        padding: 0 58px;
    }
    .el-row>.el-col-12:last-child {
        display: flex;
        justify-content: flex-end;
    }
</style>
